<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>行业开发管理系统原型</title>
    <!-- Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- WeUI CSS (用于移动端页面) -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css" />
    <!-- 自定义样式 -->
    <style>
      /* 通用样式 */
      body {
        margin: 0;
        padding: 0;
        font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
          'Microsoft YaHei', Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        color: #333;
        background-color: #f5f7fa;
      }

      /* 页面容器样式 */
      .page-container {
        padding: 20px;
        max-width: 100%;
        box-sizing: border-box;
      }

      /* 页面组样式，相关页面放在同一行 */
      .page-group {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 60px; /* 增加下边距，让页面之间有更多间隔 */
        gap: 20px;
        position: relative; /* 添加相对定位以支持标题定位 */
      }

      /* 分割线 */
      .page-divider {
        width: 100%;
        height: 1px;
        background-color: #dcdfe6;
        margin: 40px 0; /* 增加分隔线上下间距 */
        clear: both; /* 确保不受浮动影响 */
      }

      /* 页面标题 */
      .group-title {
        width: 100%;
        font-size: 18px;
        font-weight: bold;
        margin: 15px 0;
        padding-left: 15px;
        border-left: 4px solid #409eff;
      }

      /* PC端页面样式 */
      .pc-page {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        width: 1200px;
        min-height: 680px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin-bottom: 40px; /* 增加下边距 */
        overflow: hidden;
        position: relative; /* 确保相对定位 */
      }

      /* 移动端页面样式 */
      .mobile-page {
        width: 375px;
        height: 812px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        overflow: hidden;
        position: relative;
      }

      /* PC端页面头部 */
      .pc-header {
        height: 56px;
        background-color: #409eff;
        color: #fff;
        display: flex;
        align-items: center;
        padding: 0 20px;
        justify-content: space-between;
      }

      .pc-header-title {
        font-size: 18px;
        font-weight: bold;
      }

      .pc-header-user {
        display: flex;
        align-items: center;
      }

      .pc-header-user-name {
        margin-left: 10px;
      }

      /* PC端页面内容区域 */
      .pc-content {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
      }

      /* PC端侧边栏 */
      .pc-sidebar {
        width: 200px;
        background-color: #304156;
        color: #fff;
        height: auto;
        min-height: 100%;
      }

      .pc-menu {
        padding: 0;
        margin: 0;
        list-style: none;
      }

      .pc-menu-item {
        height: 56px;
        line-height: 56px;
        padding: 0 20px;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      .pc-menu-item:hover,
      .pc-menu-item.active {
        background-color: #263445;
      }

      .pc-menu-item i {
        margin-right: 10px;
      }

      /* PC端主内容区 */
      .pc-main {
        flex: 1;
        padding: 20px;
        overflow: auto;
      }

      /* 移动端页面头部 */
      .mobile-header {
        height: 44px;
        background-color: #f8f8f8;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        padding: 0 15px;
        position: relative;
      }

      .mobile-header-back {
        width: 20px;
        text-align: center;
      }

      .mobile-header-title {
        flex: 1;
        text-align: center;
        font-size: 17px;
        font-weight: 500;
      }

      /* 移动端页面内容区域 */
      .mobile-content {
        height: calc(100% - 44px);
        overflow: auto;
        padding: 15px;
      }

      /* 表格样式 */
      .el-table .cell {
        white-space: nowrap;
      }

      /* 表单样式 */
      .el-form-item__label {
        font-weight: normal;
      }

      /* 状态标签样式 */
      .status-tag-success {
        color: #67c23a;
        background-color: #f0f9eb;
        border: 1px solid #c2e7b0;
      }

      .status-tag-warning {
        color: #e6a23c;
        background-color: #fdf6ec;
        border: 1px solid #f5dab1;
      }

      .status-tag-danger {
        color: #f56c6c;
        background-color: #fef0f0;
        border: 1px solid #fbc4c4;
      }

      .status-tag-info {
        color: #909399;
        background-color: #f4f4f5;
        border: 1px solid #e9e9eb;
      }

      /* 详情页样式 */
      .detail-section {
        margin-bottom: 20px;
      }

      .detail-section-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ebeef5;
      }

      .detail-item {
        margin-bottom: 15px;
        display: flex;
      }

      .detail-label {
        width: 120px;
        color: #909399;
      }

      .detail-content {
        color: #606266;
        flex: 1;
      }

      /* 按钮组样式 */
      .button-group {
        margin: 15px 0;
      }

      /* 页面说明 */
      .page-description {
        color: #909399;
        margin-bottom: 20px;
        font-size: 14px;
      }
    </style>
  </head>
  <body data-weui-theme="light">
    <div id="app" class="page-container">
      <h1>行业开发管理系统原型v1.3</h1>
      <p class="page-description">
        此原型展示行业开发管理系统的各个页面，PC端页面宽度1200px，移动端页面宽度375px。
      </p>

      <!-- PC端页面区域 -->
      <h2>录入员相关页面</h2>

      <!-- 行业列表页和行业详情页 -->
      <div class="page-group">
        <!-- 行业列表页面 -->
        <div class="group-title">行业列表页面</div>
        <div class="pc-page">
          <div class="pc-header">
            <div class="pc-header-title">行业开发管理系统</div>
            <div class="pc-header-user">
              <i class="el-icon-user"></i>
              <span class="pc-header-user-name">张伟（渠道专员）</span>
            </div>
          </div>
          <div class="pc-content">
            <div class="pc-sidebar">
              <ul class="pc-menu">
                <li class="pc-menu-item active">
                  <i class="el-icon-s-grid"></i>
                  行业管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-user"></i>
                  客户管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-connection"></i>
                  渠道管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-s-check"></i>
                  审核管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-data-analysis"></i>
                  数据看板
                </li>
              </ul>
            </div>
            <div class="pc-main">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 20px;
                "
              >
                <div style="font-size: 20px; font-weight: bold">行业管理</div>
                <el-button type="primary" icon="el-icon-plus">新增行业</el-button>
              </div>

              <div style="display: flex; justify-content: space-between; margin-bottom: 15px">
                <div>
                  <el-input
                    placeholder="请输入行业名称搜索"
                    prefix-icon="el-icon-search"
                    style="width: 220px"
                  ></el-input>
                </div>
              </div>

              <el-table :data="industries" style="width: 100%; margin-bottom: 20px">
                <el-table-column prop="name" label="行业名称" width="180"></el-table-column>
                <el-table-column prop="createdAt" label="创建时间" width="180"></el-table-column>
                <el-table-column label="审核状态" width="120">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.status === '已通过' ? 'success' : 
                             scope.row.status === '审核中' ? 'warning' : 
                             scope.row.status === '未通过' ? 'danger' : 'info'"
                    >
                      {{ scope.row.status }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template>
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-pagination
                background
                layout="prev, pager, next"
                :total="50"
                :page-size="10"
                :current-page="1"
              ></el-pagination>

              <!-- 图例说明 -->
              <div style="margin-top: 20px; display: flex; gap: 15px">
                <div style="display: flex; align-items: center">
                  <div
                    style="width: 10px; height: 10px; background: #67c23a; margin-right: 5px"
                  ></div>
                  <span style="font-size: 12px">已通过</span>
                </div>
                <div style="display: flex; align-items: center">
                  <div
                    style="width: 10px; height: 10px; background: #e6a23c; margin-right: 5px"
                  ></div>
                  <span style="font-size: 12px">审核中</span>
                </div>
                <div style="display: flex; align-items: center">
                  <div
                    style="width: 10px; height: 10px; background: #f56c6c; margin-right: 5px"
                  ></div>
                  <span style="font-size: 12px">未通过</span>
                </div>
                <div style="display: flex; align-items: center">
                  <div
                    style="width: 10px; height: 10px; background: #909399; margin-right: 5px"
                  ></div>
                  <span style="font-size: 12px">未提交</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 行业详情页面 -->
        <div class="group-title">行业详情页面</div>
        <div class="pc-page">
          <div class="pc-header">
            <div class="pc-header-title">行业开发管理系统</div>
            <div class="pc-header-user">
              <i class="el-icon-user"></i>
              <span class="pc-header-user-name">张伟（渠道专员）</span>
            </div>
          </div>
          <div class="pc-content">
            <div class="pc-sidebar">
              <ul class="pc-menu">
                <li class="pc-menu-item active">
                  <i class="el-icon-s-grid"></i>
                  行业管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-user"></i>
                  客户管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-connection"></i>
                  渠道管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-s-check"></i>
                  审核管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-data-analysis"></i>
                  数据看板
                </li>
              </ul>
            </div>
            <div class="pc-main">
              <div style="display: flex; align-items: center; margin-bottom: 20px">
                <el-page-header @back="() => {}" content="行业详情"></el-page-header>
              </div>

              <div style="margin-bottom: 20px; display: flex; align-items: center">
                <h2 style="margin: 0; margin-right: 10px">南京制造业</h2>
                <el-tag type="success">已通过</el-tag>
              </div>

              <!-- 行业基本信息 -->
              <div class="detail-section">
                <div class="detail-section-title">行业基本信息</div>
                <div class="detail-item">
                  <div class="detail-label">行业名称：</div>
                  <div class="detail-content">南京制造业</div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">个金潜力描述：</div>
                  <div class="detail-content">南京制造业个金业务潜力巨大。</div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">三农潜力描述：</div>
                  <div class="detail-content">三农业务有较大发展空间。</div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">信用卡潜力描述：</div>
                  <div class="detail-content">信用卡渗透率高。</div>
                </div>
              </div>

              <!-- 环节列表 -->
              <div class="detail-section">
                <div style="display: flex; justify-content: space-between; align-items: center">
                  <div class="detail-section-title">环节列表</div>
                  <el-button type="primary" size="small" icon="el-icon-plus">添加环节</el-button>
                </div>

                <el-table :data="industries[0].segments" style="width: 100%; margin-bottom: 20px">
                  <el-table-column prop="name" label="环节名称" width="180"></el-table-column>
                  <el-table-column prop="type" label="环节类型" width="120"></el-table-column>
                  <el-table-column
                    prop="revenue"
                    label="营收（万元）"
                    width="120"
                  ></el-table-column>
                  <el-table-column prop="output" label="产值（万元）" width="120"></el-table-column>
                  <el-table-column
                    prop="customerCount"
                    label="客户数"
                    width="100"
                  ></el-table-column>
                  <el-table-column
                    prop="customerScale"
                    label="客户营收合计体量"
                    width="150"
                  ></el-table-column>
                  <el-table-column label="操作">
                    <template>
                      <el-button type="text" size="small">查看</el-button>
                      <el-button type="text" size="small">编辑</el-button>
                      <el-button type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <!-- 审核信息 -->
              <div class="detail-section">
                <div class="detail-section-title">审核信息</div>
                <div class="detail-item">
                  <div class="detail-label">审核状态：</div>
                  <div class="detail-content">
                    <el-tag type="success">已通过</el-tag>
                  </div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">审核意见：</div>
                  <div class="detail-content">行业发展潜力大</div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">审核时间：</div>
                  <div class="detail-content">2024-05-02 10:00:00</div>
                </div>
              </div>

              <!-- 底部按钮 -->
              <div class="button-group">
                <el-button type="primary">编辑</el-button>
                <el-button>返回</el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 新增/编辑行业页面 -->
        <div class="group-title">新增/编辑行业页面</div>
        <div class="pc-page">
          <div class="pc-header">
            <div class="pc-header-title">行业开发管理系统</div>
            <div class="pc-header-user">
              <i class="el-icon-user"></i>
              <span class="pc-header-user-name">张伟（渠道专员）</span>
            </div>
          </div>
          <div class="pc-content">
            <div class="pc-sidebar">
              <ul class="pc-menu">
                <li class="pc-menu-item active">
                  <i class="el-icon-s-grid"></i>
                  行业管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-user"></i>
                  客户管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-connection"></i>
                  渠道管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-s-check"></i>
                  审核管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-data-analysis"></i>
                  数据看板
                </li>
              </ul>
            </div>
            <div class="pc-main">
              <div style="display: flex; align-items: center; margin-bottom: 20px">
                <el-page-header @back="() => {}" content="新增行业"></el-page-header>
              </div>

              <el-form ref="form" label-width="120px" style="max-width: 900px">
                <!-- 行业基本信息 -->
                <div class="detail-section">
                  <div class="detail-section-title">行业基本信息</div>

                  <el-form-item label="行业名称" required>
                    <el-input placeholder="请输入行业名称" style="width: 400px"></el-input>
                  </el-form-item>

                  <el-form-item label="个金潜力描述">
                    <el-input
                      type="textarea"
                      rows="3"
                      placeholder="请描述个金业务发展潜力"
                      style="width: 600px"
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="三农潜力描述">
                    <el-input
                      type="textarea"
                      rows="3"
                      placeholder="请描述三农业务发展潜力"
                      style="width: 600px"
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="信用卡潜力描述">
                    <el-input
                      type="textarea"
                      rows="3"
                      placeholder="请描述信用卡发展潜力"
                      style="width: 600px"
                    ></el-input>
                  </el-form-item>
                </div>

                <!-- 环节信息 -->
                <div class="detail-section">
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      margin-bottom: 15px;
                    "
                  >
                    <div class="detail-section-title" style="margin-bottom: 0">环节信息</div>
                    <el-button type="primary" size="small" icon="el-icon-plus">添加环节</el-button>
                  </div>

                  <!-- 环节表单项 -->
                  <div
                    style="
                      background-color: #f8f8f8;
                      padding: 15px;
                      border-radius: 4px;
                      margin-bottom: 15px;
                    "
                  >
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
                      <span style="font-weight: bold">环节 1</span>
                      <el-button type="danger" size="mini" icon="el-icon-delete" plain>
                        删除
                      </el-button>
                    </div>

                    <div style="display: flex; flex-wrap: wrap; gap: 15px">
                      <el-form-item
                        label="环节名称"
                        style="width: calc(50% - 15px); margin-bottom: 15px"
                      >
                        <el-input placeholder="请输入环节名称"></el-input>
                      </el-form-item>

                      <el-form-item
                        label="环节类型"
                        style="width: calc(50% - 15px); margin-bottom: 15px"
                      >
                        <el-select placeholder="请选择环节类型" style="width: 100%">
                          <el-option label="生产" value="生产"></el-option>
                          <el-option label="批发" value="批发"></el-option>
                          <el-option label="零售" value="零售"></el-option>
                          <el-option label="消费" value="消费"></el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item
                        label="营收"
                        style="width: calc(50% - 15px); margin-bottom: 15px"
                      >
                        <el-input-number
                          placeholder="营收（万元）"
                          :min="0"
                          :controls="false"
                          style="width: 100%"
                        ></el-input-number>
                      </el-form-item>

                      <el-form-item
                        label="产值"
                        style="width: calc(50% - 15px); margin-bottom: 15px"
                      >
                        <el-input-number
                          placeholder="产值（万元）"
                          :min="0"
                          :controls="false"
                          style="width: 100%"
                        ></el-input-number>
                      </el-form-item>

                      <el-form-item
                        label="结算量"
                        style="width: calc(50% - 15px); margin-bottom: 15px"
                      >
                        <el-input-number
                          placeholder="结算量"
                          :min="0"
                          :controls="false"
                          style="width: 100%"
                        ></el-input-number>
                      </el-form-item>

                      <el-form-item
                        label="客户数"
                        style="width: calc(50% - 15px); margin-bottom: 15px"
                      >
                        <el-input-number
                          placeholder="客户数量"
                          :min="0"
                          :controls="false"
                          style="width: 100%"
                        ></el-input-number>
                      </el-form-item>

                      <el-form-item
                        label="客户营收合计体量"
                        style="width: calc(50% - 15px); margin-bottom: 15px"
                      >
                        <el-select placeholder="请选择体量级别" style="width: 100%">
                          <el-option label="亿级" value="亿级"></el-option>
                          <el-option label="5000万" value="5000万"></el-option>
                          <el-option label="千万" value="千万"></el-option>
                          <el-option label="500万" value="500万"></el-option>
                          <el-option label="百万级" value="百万级"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>

                  <!-- 第二个环节表单项 -->
                  <div
                    style="
                      background-color: #f8f8f8;
                      padding: 15px;
                      border-radius: 4px;
                      margin-bottom: 15px;
                    "
                  >
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
                      <span style="font-weight: bold">环节 2</span>
                      <el-button type="danger" size="mini" icon="el-icon-delete" plain>
                        删除
                      </el-button>
                    </div>

                    <div style="display: flex; flex-wrap: wrap; gap: 15px">
                      <el-form-item
                        label="环节名称"
                        style="width: calc(50% - 15px); margin-bottom: 15px"
                      >
                        <el-input placeholder="请输入环节名称" value="批发"></el-input>
                      </el-form-item>

                      <el-form-item
                        label="环节类型"
                        style="width: calc(50% - 15px); margin-bottom: 15px"
                      >
                        <el-select placeholder="请选择环节类型" style="width: 100%" value="批发">
                          <el-option label="生产" value="生产"></el-option>
                          <el-option label="批发" value="批发"></el-option>
                          <el-option label="零售" value="零售"></el-option>
                          <el-option label="消费" value="消费"></el-option>
                        </el-select>
                      </el-form-item>

                      <!-- 其他字段 -->
                      <el-form-item
                        label="营收"
                        style="width: calc(50% - 15px); margin-bottom: 15px"
                      >
                        <el-input-number
                          placeholder="营收（万元）"
                          :min="0"
                          :controls="false"
                          style="width: 100%"
                          :value="3000"
                        ></el-input-number>
                      </el-form-item>
                    </div>
                  </div>
                </div>

                <!-- 表单底部按钮 -->
                <el-form-item>
                  <el-button type="primary">保存</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>

        <!-- 渠道列表页面 -->
        <div class="group-title">渠道列表页面</div>
        <div class="pc-page">
          <div class="pc-header">
            <div class="pc-header-title">行业开发管理系统</div>
            <div class="pc-header-user">
              <i class="el-icon-user"></i>
              <span class="pc-header-user-name">张伟（渠道专员）</span>
            </div>
          </div>
          <div class="pc-content">
            <div class="pc-sidebar">
              <ul class="pc-menu">
                <li class="pc-menu-item">
                  <i class="el-icon-s-grid"></i>
                  行业管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-user"></i>
                  客户管理
                </li>
                <li class="pc-menu-item active">
                  <i class="el-icon-connection"></i>
                  渠道管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-s-check"></i>
                  审核管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-data-analysis"></i>
                  数据看板
                </li>
              </ul>
            </div>
            <div class="pc-main">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 20px;
                "
              >
                <div style="font-size: 20px; font-weight: bold">渠道管理</div>
                <el-button type="primary" icon="el-icon-plus">新增渠道</el-button>
              </div>
              <!-- 搜索和筛选区域 -->
              <div style="display: flex; gap: 16px; margin-bottom: 16px">
                <el-input
                  placeholder="请输入渠道名称搜索"
                  prefix-icon="el-icon-search"
                  style="width: 220px"
                ></el-input>
                <el-select placeholder="所属行业" clearable style="width: 180px">
                  <el-option
                    v-for="item in industries"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
                <el-select placeholder="所属环节" clearable style="width: 150px">
                  <el-option label="生产" value="生产"></el-option>
                  <el-option label="批发" value="批发"></el-option>
                  <el-option label="零售" value="零售"></el-option>
                  <el-option label="消费" value="消费"></el-option>
                  <el-option label="物流" value="物流"></el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
              </div>
              <!-- 渠道列表表格 -->
              <el-table :data="channels" style="width: 100%; margin-bottom: 20px">
                <el-table-column prop="name" label="渠道名称" width="200"></el-table-column>
                <el-table-column prop="address" label="地址" width="300"></el-table-column>
                <el-table-column prop="industry" label="所属行业" width="180"></el-table-column>
                <el-table-column prop="segment" label="所属环节" width="120"></el-table-column>
                <el-table-column label="操作" width="180">
                  <template>
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                layout="prev, pager, next"
                :total="50"
                :page-size="10"
                :current-page="1"
              ></el-pagination>
            </div>
          </div>
        </div>

        <!-- 渠道详情页面 -->
        <div class="group-title">渠道详情页面</div>
        <div class="pc-page">
          <div class="pc-header">
            <div class="pc-header-title">行业开发管理系统</div>
            <div class="pc-header-user">
              <i class="el-icon-user"></i>
              <span class="pc-header-user-name">张伟（渠道专员）</span>
            </div>
          </div>
          <div class="pc-content">
            <div class="pc-sidebar">
              <ul class="pc-menu">
                <li class="pc-menu-item">
                  <i class="el-icon-s-grid"></i>
                  行业管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-user"></i>
                  客户管理
                </li>
                <li class="pc-menu-item active">
                  <i class="el-icon-connection"></i>
                  渠道管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-s-check"></i>
                  审核管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-data-analysis"></i>
                  数据看板
                </li>
              </ul>
            </div>
            <div class="pc-main">
              <div style="display: flex; align-items: center; margin-bottom: 20px">
                <el-page-header @back="() => {}" content="渠道详情"></el-page-header>
              </div>
              <div style="margin-bottom: 20px; display: flex; align-items: center">
                <h2 style="margin: 0; margin-right: 10px">南京新街口支行</h2>
              </div>
              <!-- 渠道基本信息卡片 -->
              <div class="detail-section">
                <div class="detail-section-title">渠道基本信息</div>
                <div class="detail-item">
                  <div class="detail-label">渠道名称：</div>
                  <div class="detail-content">南京新街口支行</div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">地址：</div>
                  <div class="detail-content">南京市秦淮区中山南路100号</div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">描述：</div>
                  <div class="detail-content">核心商圈支行</div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">所属行业：</div>
                  <div class="detail-content">南京制造业</div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">所属环节：</div>
                  <div class="detail-content">生产</div>
                </div>
              </div>
              <!-- 底部按钮 -->
              <div class="button-group">
                <el-button type="primary">编辑</el-button>
                <el-button>返回</el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 新增/编辑渠道页面 -->
        <div class="group-title">新增/编辑渠道页面</div>
        <div class="pc-page">
          <!-- 添加页面标识 -->
          <div
            style="
              position: absolute;
              top: -30px;
              left: 0;
              font-size: 16px;
              font-weight: bold;
              color: #409eff;
            "
          >
            新增/编辑渠道页面
          </div>
          <div class="pc-header">
            <div class="pc-header-title">行业开发管理系统</div>
            <div class="pc-header-user">
              <i class="el-icon-user"></i>
              <span class="pc-header-user-name">张伟（渠道专员）</span>
            </div>
          </div>
          <div class="pc-content">
            <div class="pc-sidebar">
              <ul class="pc-menu">
                <li class="pc-menu-item">
                  <i class="el-icon-s-grid"></i>
                  行业管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-user"></i>
                  客户管理
                </li>
                <li class="pc-menu-item active">
                  <i class="el-icon-connection"></i>
                  渠道管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-s-check"></i>
                  审核管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-data-analysis"></i>
                  数据看板
                </li>
              </ul>
            </div>
            <div class="pc-main">
              <div style="display: flex; align-items: center; margin-bottom: 20px">
                <el-page-header @back="() => {}" content="新增渠道"></el-page-header>
              </div>

              <el-form ref="form" label-width="120px" style="max-width: 900px">
                <!-- 渠道基本信息 -->
                <div class="detail-section">
                  <div class="detail-section-title">渠道基本信息</div>

                  <el-form-item label="渠道名称" required>
                    <el-input placeholder="请输入渠道名称" style="width: 400px"></el-input>
                  </el-form-item>

                  <el-form-item label="地址">
                    <el-input placeholder="请输入地址" style="width: 400px"></el-input>
                  </el-form-item>

                  <el-form-item label="所属行业">
                    <el-select placeholder="请选择所属行业" style="width: 400px">
                      <el-option
                        v-for="item in industries"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="所属环节">
                    <el-select placeholder="请选择所属环节" style="width: 400px">
                      <el-option label="生产" value="生产"></el-option>
                      <el-option label="批发" value="批发"></el-option>
                      <el-option label="零售" value="零售"></el-option>
                      <el-option label="消费" value="消费"></el-option>
                    </el-select>
                  </el-form-item>
                </div>

                <!-- 表单底部按钮 -->
                <el-form-item>
                  <el-button type="primary">保存</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>

        <!-- 客户列表页面 -->
        <div class="group-title">客户列表页面</div>
        <div class="pc-page">
          <!-- 添加页面标识 -->
          <div
            style="
              position: absolute;
              top: -30px;
              left: 0;
              font-size: 16px;
              font-weight: bold;
              color: #409eff;
            "
          >
            客户列表页面
          </div>
          <div class="pc-header">
            <div class="pc-header-title">行业开发管理系统</div>
            <div class="pc-header-user">
              <i class="el-icon-user"></i>
              <span class="pc-header-user-name">张伟（渠道专员）</span>
            </div>
          </div>
          <div class="pc-content">
            <div class="pc-sidebar">
              <ul class="pc-menu">
                <li class="pc-menu-item">
                  <i class="el-icon-s-grid"></i>
                  行业管理
                </li>
                <li class="pc-menu-item active">
                  <i class="el-icon-user"></i>
                  客户管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-connection"></i>
                  渠道管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-s-check"></i>
                  审核管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-data-analysis"></i>
                  数据看板
                </li>
              </ul>
            </div>
            <div class="pc-main">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 20px;
                "
              >
                <div style="font-size: 20px; font-weight: bold">客户管理</div>
                <el-button type="primary" icon="el-icon-plus">新增客户</el-button>
              </div>

              <!-- 搜索和筛选区域 -->
              <div
                style="
                  background-color: #f5f7fa;
                  padding: 15px;
                  border-radius: 4px;
                  margin-bottom: 20px;
                "
              >
                <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px">
                  <el-input
                    placeholder="请输入客户名称/客户号搜索"
                    prefix-icon="el-icon-search"
                    style="width: 220px"
                  ></el-input>

                  <el-select placeholder="客户类型" clearable style="width: 150px">
                    <el-option label="个人" value="个人"></el-option>
                    <el-option label="企业" value="企业"></el-option>
                  </el-select>

                  <el-select placeholder="所属行业" clearable style="width: 180px">
                    <el-option
                      v-for="item in industries"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>

                  <el-select placeholder="所属环节" clearable style="width: 150px">
                    <el-option label="生产" value="生产"></el-option>
                    <el-option label="批发" value="批发"></el-option>
                    <el-option label="零售" value="零售"></el-option>
                    <el-option label="消费" value="消费"></el-option>
                  </el-select>
                </div>

                <div style="display: flex; justify-content: flex-end">
                  <el-button type="primary" size="small" icon="el-icon-search">搜索</el-button>
                  <el-button size="small" icon="el-icon-refresh">重置</el-button>
                </div>
              </div>

              <!-- 客户列表 -->
              <el-table :data="customers" style="width: 100%; margin-bottom: 20px">
                <el-table-column label="客户名称" width="180">
                  <template slot-scope="scope">
                    <span>
                      {{ scope.row.type === '企业' ? scope.row.companyName : scope.row.name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="150"></el-table-column>
                <el-table-column prop="industry" label="所属行业" width="150"></el-table-column>
                <el-table-column prop="segment" label="所属环节" width="120"></el-table-column>
                <el-table-column prop="type" label="客户类型" width="100"></el-table-column>
                <el-table-column label="操作">
                  <template>
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-pagination
                background
                layout="prev, pager, next"
                :total="50"
                :page-size="10"
                :current-page="1"
              ></el-pagination>
            </div>
          </div>
        </div>

        <!-- 客户详情页面 -->
        <div class="group-title">客户详情页面</div>
        <div class="pc-page">
          <!-- 添加页面标识 -->
          <div
            style="
              position: absolute;
              top: -30px;
              left: 0;
              font-size: 16px;
              font-weight: bold;
              color: #409eff;
            "
          >
            客户详情页面
          </div>
          <div class="pc-header">
            <div class="pc-header-title">行业开发管理系统</div>
            <div class="pc-header-user">
              <i class="el-icon-user"></i>
              <span class="pc-header-user-name">张伟（渠道专员）</span>
            </div>
          </div>
          <div class="pc-content">
            <div class="pc-sidebar">
              <ul class="pc-menu">
                <li class="pc-menu-item">
                  <i class="el-icon-s-grid"></i>
                  行业管理
                </li>
                <li class="pc-menu-item active">
                  <i class="el-icon-user"></i>
                  客户管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-connection"></i>
                  渠道管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-s-check"></i>
                  审核管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-data-analysis"></i>
                  数据看板
                </li>
              </ul>
            </div>
            <div class="pc-main">
              <div style="display: flex; align-items: center; margin-bottom: 20px">
                <el-page-header @back="() => {}" content="客户详情"></el-page-header>
              </div>

              <div style="margin-bottom: 20px; display: flex; align-items: center">
                <h2 style="margin: 0; margin-right: 10px">南京金龙机械有限公司</h2>
                <el-tag type="success">已通过</el-tag>
              </div>

              <!-- 客户基本信息 -->
              <div class="detail-section">
                <div class="detail-section-title">客户基本信息</div>
                <div style="display: flex; flex-wrap: wrap">
                  <div style="width: 50%">
                    <div class="detail-item">
                      <div class="detail-label">所属行业：</div>
                      <div class="detail-content">南京制造业</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">所属环节：</div>
                      <div class="detail-content">生产</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">客户类型：</div>
                      <div class="detail-content">企业</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">客户号：</div>
                      <div class="detail-content">3201************21</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">商户号：</div>
                      <div class="detail-content">M20240001</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">企业名称：</div>
                      <div class="detail-content">南京金龙机械有限公司</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">电话：</div>
                      <div class="detail-content">186***80897</div>
                    </div>
                  </div>
                  <div style="width: 50%">
                    <div class="detail-item">
                      <div class="detail-label">统一社会信用代码：</div>
                      <div class="detail-content">9132************21</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">地址：</div>
                      <div class="detail-content">南京市江北新区龙腾路88号</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">承包面积：</div>
                      <div class="detail-content">1200平方米</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">营收：</div>
                      <div class="detail-content">8000万元</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">产值：</div>
                      <div class="detail-content">12000万元</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">结算量：</div>
                      <div class="detail-content">5000万元</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">客户数：</div>
                      <div class="detail-content">30</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">客户营收合计体量：</div>
                      <div class="detail-content">亿级</div>
                    </div>
                  </div>
                </div>

                <div class="detail-item">
                  <div class="detail-label">客户经理：</div>
                  <div class="detail-content">李明</div>
                </div>
                <div class="detail-item">
                  <div class="detail-label">录入人：</div>
                  <div class="detail-content">张伟（南京新街口支行）</div>
                </div>
              </div>

              <!-- 产品信息 -->
              <div class="detail-section">
                <div class="detail-section-title">产品信息</div>

                <el-tabs>
                  <el-tab-pane label="已办产品">
                    <el-table :data="customers[0].products" style="width: 100%">
                      <el-table-column prop="name" label="产品名称" width="180"></el-table-column>
                      <el-table-column
                        prop="amount"
                        label="金额（万元）"
                        width="150"
                      ></el-table-column>
                      <el-table-column prop="date" label="办理日期"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </div>

              <!-- 走访记录 -->
              <div class="detail-section">
                <div style="display: flex; justify-content: space-between; align-items: center">
                  <div class="detail-section-title">走访记录</div>
                  <el-button type="primary" size="small" disabled>添加走访</el-button>
                </div>

                <div style="color: #909399; font-size: 12px; margin-bottom: 15px">
                  注：走访记录只能在移动端录入，请打开邮捷APP录入走访信息
                </div>

                <el-table :data="visits.filter(v => v.customerId === 'cus001')" style="width: 100%">
                  <el-table-column prop="theme" label="走访主题" width="180"></el-table-column>
                  <el-table-column prop="purpose" label="走访目的" width="180"></el-table-column>
                  <el-table-column prop="user" label="走访人员" width="120"></el-table-column>
                  <el-table-column prop="time" label="走访时间" width="180"></el-table-column>
                  <el-table-column prop="type" label="走访类型" width="100"></el-table-column>
                  <el-table-column label="操作">
                    <template>
                      <el-button type="text" size="small">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <!-- 修改记录 -->
              <div class="detail-section">
                <div class="detail-section-title">修改记录</div>
                <el-timeline>
                  <el-timeline-item
                    v-for="(log, index) in auditLogs.slice(0, 2)"
                    :key="index"
                    :timestamp="log.time"
                    :color="log.result === '通过' ? '#67c23a' : '#f56c6c'"
                  >
                    <div>{{ log.user }} 进行了修改</div>
                    <div style="color: #909399; font-size: 12px">修改内容：更新客户基本信息</div>
                  </el-timeline-item>
                </el-timeline>
              </div>

              <!-- 底部按钮 -->
              <div class="button-group">
                <el-button type="primary">编辑</el-button>
                <el-button>返回</el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 新增/编辑客户页面 -->
        <div class="group-title">新增/编辑客户页面</div>
        <div class="pc-page">
          <div class="pc-header">
            <div class="pc-header-title">行业开发管理系统</div>
            <div class="pc-header-user">
              <i class="el-icon-user"></i>
              <span class="pc-header-user-name">张伟（渠道专员）</span>
            </div>
          </div>
          <div class="pc-content">
            <div class="pc-sidebar">
              <ul class="pc-menu">
                <li class="pc-menu-item">
                  <i class="el-icon-s-grid"></i>
                  行业管理
                </li>
                <li class="pc-menu-item active">
                  <i class="el-icon-user"></i>
                  客户管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-connection"></i>
                  渠道管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-s-check"></i>
                  审核管理
                </li>
                <li class="pc-menu-item">
                  <i class="el-icon-data-analysis"></i>
                  数据看板
                </li>
              </ul>
            </div>
            <div class="pc-main">
              <div style="display: flex; align-items: center; margin-bottom: 20px">
                <el-page-header @back="() => {}" content="新增/编辑客户"></el-page-header>
              </div>
              <el-form ref="form" label-width="120px" style="max-width: 900px">
                <!-- 行业环节选择区 -->
                <div class="detail-section">
                  <div class="detail-section-title">行业与环节</div>
                  <el-form-item label="所属行业" required>
                    <el-select placeholder="请选择所属行业" style="width: 400px">
                      <el-option
                        v-for="item in industries"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="所属环节" required>
                    <el-select placeholder="请选择所属环节" style="width: 400px">
                      <el-option label="生产" value="生产"></el-option>
                      <el-option label="批发" value="批发"></el-option>
                      <el-option label="零售" value="零售"></el-option>
                      <el-option label="消费" value="消费"></el-option>
                      <el-option label="物流" value="物流"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <!-- 客户类型选择区 -->
                <div class="detail-section">
                  <div class="detail-section-title">客户类型</div>
                  <el-form-item label="客户类型" required>
                    <el-radio-group>
                      <el-radio label="个人">个人</el-radio>
                      <el-radio label="企业">企业</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <!-- 个人客户信息区（仅客户类型为个人时显示） -->
                <div class="detail-section">
                  <div class="detail-section-title">个人客户信息</div>
                  <el-form-item label="客户号">
                    <el-input placeholder="自动反显" style="width: 400px"></el-input>
                  </el-form-item>
                  <el-form-item label="姓名" required>
                    <el-input placeholder="请输入姓名" style="width: 400px"></el-input>
                  </el-form-item>
                  <el-form-item label="电话" required>
                    <el-input placeholder="请输入电话" style="width: 400px"></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号">
                    <el-input placeholder="请输入身份证号" style="width: 400px"></el-input>
                  </el-form-item>
                  <el-form-item label="地址">
                    <el-input placeholder="请输入地址" style="width: 400px"></el-input>
                  </el-form-item>
                </div>
                <!-- 企业客户信息区（仅客户类型为企业时显示） -->
                <div class="detail-section">
                  <div class="detail-section-title">企业客户信息</div>
                  <el-form-item label="客户号">
                    <el-input placeholder="自动反显" style="width: 400px"></el-input>
                  </el-form-item>
                  <el-form-item label="商户号">
                    <el-input placeholder="请输入商户号" style="width: 400px"></el-input>
                  </el-form-item>
                  <el-form-item label="企业名称" required>
                    <el-input placeholder="请输入企业名称" style="width: 400px"></el-input>
                  </el-form-item>
                  <el-form-item label="电话" required>
                    <el-input placeholder="请输入电话" style="width: 400px"></el-input>
                  </el-form-item>
                  <el-form-item label="统一社会信用代码">
                    <el-input placeholder="请输入统一社会信用代码" style="width: 400px"></el-input>
                  </el-form-item>
                  <el-form-item label="地址">
                    <el-input placeholder="请输入地址" style="width: 400px"></el-input>
                  </el-form-item>
                  <el-form-item label="承包面积">
                    <el-input-number
                      placeholder="承包面积"
                      :min="0"
                      style="width: 400px"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="营收">
                    <el-input-number
                      placeholder="营收（万元）"
                      :min="0"
                      style="width: 400px"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="产值">
                    <el-input-number
                      placeholder="产值（万元）"
                      :min="0"
                      style="width: 400px"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="结算量">
                    <el-input-number
                      placeholder="结算量"
                      :min="0"
                      style="width: 400px"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="客户数">
                    <el-input-number
                      placeholder="客户数量"
                      :min="0"
                      style="width: 400px"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="客户营收合计体量">
                    <el-select placeholder="请选择体量级别" style="width: 400px">
                      <el-option label="亿级" value="亿级"></el-option>
                      <el-option label="5000万" value="5000万"></el-option>
                      <el-option label="千万" value="千万"></el-option>
                      <el-option label="500万" value="500万"></el-option>
                      <el-option label="百万级" value="百万级"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="客户经理">
                    <el-input placeholder="自动反显" style="width: 400px"></el-input>
                  </el-form-item>
                </div>
                <!-- 走访人情况 -->
                <div class="detail-section">
                  <div class="detail-section-title">走访人情况</div>
                  <el-form-item label="录入人">
                    <el-input placeholder="自动反显" style="width: 400px" value="张伟"></el-input>
                  </el-form-item>
                  <el-form-item label="录入人所在机构">
                    <el-input
                      placeholder="自动反显"
                      style="width: 400px"
                      value="南京新街口支行"
                    ></el-input>
                  </el-form-item>
                </div>
                <!-- 底部按钮 -->
                <el-form-item>
                  <el-button type="primary">保存</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>

      <!-- 审核人员相关页面 -->
      <div class="page-divider"></div>
      <h2>审核人员相关页面</h2>

      <!-- 审核tab页：行业审核、提级营销审核 -->
      <div class="pc-page">
        <div class="pc-header">
          <div class="pc-header-title">行业开发管理系统</div>
          <div class="pc-header-user">
            <i class="el-icon-user"></i>
            <span class="pc-header-user-name">李华（审核专员）</span>
          </div>
        </div>
        <div class="pc-main">
          <el-tabs value="industry" style="margin-bottom: 24px">
            <el-tab-pane label="行业审核" name="industry">
              <!-- 行业审核tab内容 -->
              <div style="display: flex; gap: 16px; margin-bottom: 16px">
                <el-select placeholder="审核状态" style="width: 180px">
                  <el-option label="全部" value="all"></el-option>
                  <el-option label="待审核" value="pending"></el-option>
                  <el-option label="部分通过" value="partial"></el-option>
                  <el-option label="已通过" value="pass"></el-option>
                  <el-option label="未通过" value="fail"></el-option>
                </el-select>
                <el-date-picker
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
              <el-table
                :data="audits.filter(a=>a.type==='行业')"
                style="width: 100%; margin-bottom: 24px"
              >
                <el-table-column prop="name" label="行业名称" width="180"></el-table-column>
                <el-table-column prop="submitTime" label="提交时间" width="180"></el-table-column>
                <el-table-column prop="status" label="当前状态" width="120"></el-table-column>
                <el-table-column label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="showIndustryDetail(scope.row)">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 行业审核详情页 -->
              <el-dialog :visible.sync="industryDetailVisible" title="行业审核详情" width="600px">
                <div>
                  <div style="margin-bottom: 12px">
                    <b>行业名称：</b>
                    {{ industryDetail.name }}
                  </div>
                  <div style="margin-bottom: 12px">
                    <b>提交时间：</b>
                    {{ industryDetail.submitTime }}
                  </div>
                  <div style="margin-bottom: 12px">
                    <b>当前状态：</b>
                    {{ industryDetail.status }}
                  </div>
                  <div style="margin-bottom: 12px">
                    <b>审核意见：</b>
                    {{ industryDetail.opinion }}
                  </div>
                  <div style="margin-bottom: 12px"><b>审核流程：</b></div>
                  <el-timeline direction="vertical">
                    <el-timeline-item
                      v-for="log in auditLogs"
                      :key="log.id"
                      :timestamp="log.time"
                      :color="log.result==='通过'?'#67C23A':(log.result==='不通过'?'#F56C6C':'#909399')"
                    >
                      <div>
                        <b>{{ log.user }}</b>
                        （{{ log.result }}）
                      </div>
                      <div>意见：{{ log.opinion }}</div>
                    </el-timeline-item>
                  </el-timeline>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="industryDetailVisible = false">关闭</el-button>
                </span>
              </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="提级营销审核" name="promotion">
              <!-- 提级营销审核tab内容 -->
              <div style="display: flex; gap: 16px; margin-bottom: 16px">
                <el-select placeholder="审核状态" style="width: 180px">
                  <el-option label="全部" value="all"></el-option>
                  <el-option label="待审核" value="pending"></el-option>
                  <el-option label="一审通过" value="firstpass"></el-option>
                  <el-option label="已通过" value="pass"></el-option>
                  <el-option label="未通过" value="fail"></el-option>
                </el-select>
                <el-date-picker
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
              <el-table :data="promotions" style="width: 100%; margin-bottom: 24px">
                <el-table-column prop="target" label="提级目标" width="180"></el-table-column>
                <el-table-column prop="reason" label="提级原因" width="220"></el-table-column>
                <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
                <el-table-column prop="org" label="申请机构" width="180"></el-table-column>
                <el-table-column prop="time" label="申请时间" width="180"></el-table-column>
                <el-table-column prop="status" label="当前状态" width="120"></el-table-column>
                <el-table-column label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="showPromotionDetail(scope.row)">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 提级营销审核详情页 -->
              <el-dialog
                :visible.sync="promotionDetailVisible"
                title="提级营销审核详情"
                width="600px"
              >
                <div>
                  <div style="margin-bottom: 12px">
                    <b>提级目标：</b>
                    {{ promotionDetail.target }}
                  </div>
                  <div style="margin-bottom: 12px">
                    <b>提级原因：</b>
                    {{ promotionDetail.reason }}
                  </div>
                  <div style="margin-bottom: 12px">
                    <b>申请人：</b>
                    {{ promotionDetail.applicant }}
                  </div>
                  <div style="margin-bottom: 12px">
                    <b>申请机构：</b>
                    {{ promotionDetail.org }}
                  </div>
                  <div style="margin-bottom: 12px">
                    <b>申请时间：</b>
                    {{ promotionDetail.time }}
                  </div>
                  <div style="margin-bottom: 12px">
                    <b>当前状态：</b>
                    {{ promotionDetail.status }}
                  </div>
                  <div style="margin-bottom: 12px"><b>审核流程：</b></div>
                  <el-timeline direction="vertical">
                    <el-timeline-item
                      v-for="node in auditNodes"
                      :key="node.name"
                      :timestamp="node.time"
                      :color="node.result==='通过'?'#67C23A':(node.result==='不通过'?'#F56C6C':'#909399')"
                    >
                      <div>
                        <b>{{ node.name }}</b>
                        （{{ node.result }}）
                      </div>
                      <div>审核人：{{ node.user || '待分配' }}</div>
                      <div>意见：{{ node.opinion || '—' }}</div>
                    </el-timeline-item>
                  </el-timeline>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="promotionDetailVisible = false">关闭</el-button>
                </span>
              </el-dialog>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <h2>行业开发工具相关页面（移动端）</h2>
      <!-- 行业开发工具相关页面（移动端） -->
      <div class="page-group">
        <!-- 提级营销申请列表页面 -->
        <div class="group-title" style="font-size: 16px; color: #409eff; margin-bottom: 12px">
          提级营销申请列表页面
        </div>
        <div class="mobile-page">
          <div class="mobile-header">
            <div class="mobile-header-back"></div>
            <div class="mobile-header-title">提级营销申请</div>
          </div>
          <div class="mobile-content">
            <button class="weui-btn weui-btn_primary" style="margin-bottom: 12px">新增申请</button>
            <div class="weui-cells">
              <div class="weui-cell" v-for="item in promotions" :key="item.id">
                <div class="weui-cell__bd">
                  <p>{{ item.target }}</p>
                  <p style="font-size: 12px; color: #888">{{ item.user }} | {{ item.time }}</p>
                </div>
                <div class="weui-cell__ft">
                  <span
                    class="weui-badge"
                    :class="{
                    'weui-badge_success': item.status==='已通过',
                    'weui-badge_warn': item.status==='待审核',
                    'weui-badge_error': item.status==='未通过'
                  }"
                  >
                    {{ item.status }}
                  </span>
                </div>
              </div>
            </div>
            <div style="color: #909399; font-size: 12px; margin-top: 16px">
              仅显示本人发起的提级营销申请，未审核可编辑/撤回
            </div>
          </div>
        </div>

        <!-- 提级营销申请详情页面 -->
        <div class="group-title" style="font-size: 16px; color: #409eff; margin-bottom: 12px">
          提级营销申请详情页面
        </div>
        <div class="mobile-page">
          <div class="mobile-header">
            <div class="mobile-header-back"></div>
            <div class="mobile-header-title">申请详情</div>
          </div>
          <div class="mobile-content">
            <div class="weui-cells__title">申请基本信息</div>
            <div class="weui-cells">
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">提级对象</label></div>
                <div class="weui-cell__bd">省行三农部</div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">申请人</label></div>
                <div class="weui-cell__bd">李明</div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">申请人机构</label></div>
                <div class="weui-cell__bd">南京新街口支行</div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">申请时间</label></div>
                <div class="weui-cell__bd">2024-05-01 10:00:00</div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">申请原因</label></div>
                <div class="weui-cell__bd">客户为重点企业，需省行陪同走访</div>
              </div>
            </div>
            <div class="weui-cells__title">审核状态</div>
            <div class="weui-cells">
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">当前状态</label></div>
                <div class="weui-cell__bd">
                  <span class="weui-badge weui-badge_warn">待审核</span>
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">审核意见</label></div>
                <div class="weui-cell__bd">-</div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">审核时间</label></div>
                <div class="weui-cell__bd">-</div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">审核人</label></div>
                <div class="weui-cell__bd">-</div>
              </div>
            </div>
            <div style="margin-top: 16px; display: flex; gap: 12px">
              <button class="weui-btn weui-btn_mini weui-btn_primary">编辑</button>
              <button class="weui-btn weui-btn_mini weui-btn_warn">撤回</button>
            </div>
          </div>
        </div>

        <!-- 提级营销新增/编辑页面 -->
        <div class="group-title" style="font-size: 16px; color: #409eff; margin-bottom: 12px">
          提级营销新增/编辑页面
        </div>
        <div class="mobile-page">
          <div class="mobile-header">
            <div class="mobile-header-back"></div>
            <div class="mobile-header-title">新增提级营销</div>
          </div>
          <form
            class="weui-form"
            autocomplete="off"
            style="margin-top: 0; overflow-y: auto; max-height: 768px"
          >
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd">
                  <label class="weui-label">提级对象</label>
                </div>
                <div class="weui-cell__bd">
                  <select class="weui-select" required>
                    <option value="">请选择</option>
                    <option value="省行三农部">省行三农部</option>
                    <option value="省行个金部">省行个金部</option>
                    <option value="省行公司部">省行公司部</option>
                    <option value="市行三农部">市行三农部</option>
                    <option value="市行个金部">市行个金部</option>
                    <option value="市行公司部">市行公司部</option>
                  </select>
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <label class="weui-label">申请原因</label>
                </div>
                <div class="weui-cell__bd">
                  <textarea
                    class="weui-textarea"
                    placeholder="请输入申请原因"
                    maxlength="200"
                    required
                    style="min-height: 60px"
                    id="reason-textarea"
                  ></textarea>
                  <div class="weui-textarea-counter">
                    <span id="reason-counter">0</span>
                    /200
                  </div>
                </div>
              </div>
            </div>
            <div class="weui-form__opr-area">
              <button class="weui-btn weui-btn_primary" style="margin-bottom: 12px">保存</button>
              <button class="weui-btn weui-btn_default" type="button">取消</button>
            </div>
          </form>
        </div>

        <!-- 走访新增/编辑页面 -->
        <div class="group-title" style="font-size: 16px; color: #409eff; margin-bottom: 12px">
          走访新增/编辑页面
        </div>
        <div class="mobile-page" style="width: 375px; margin-bottom: 32px" data-weui-theme="light">
          <div class="mobile-header">
            <div class="mobile-header-back"></div>
            <div class="mobile-header-title">新增/编辑走访</div>
          </div>
          <div
            class="mobile-content"
            style="overflow-y: auto; max-height: 768px; padding-bottom: 16px"
          >
            <form class="weui-form">
              <!-- 走访对象输入区 -->
              <div class="weui-cells__title">走访对象</div>
              <div class="weui-cells">
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <label class="weui-label">
                      所属行业
                      <span style="color: red">*</span>
                    </label>
                  </div>
                  <div class="weui-cell__bd">
                    <select class="weui-select" required>
                      <option value="">请选择</option>
                      <option>南京制造业</option>
                      <option>南京软件业</option>
                      <option>南京零售业</option>
                      <option>南京物流业</option>
                      <option>南京金融业</option>
                    </select>
                  </div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">所属环节</label></div>
                  <div class="weui-cell__bd">
                    <select class="weui-select">
                      <option value="">请选择</option>
                      <option>生产</option>
                      <option>批发</option>
                      <option>零售</option>
                      <option>物流</option>
                    </select>
                  </div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">商户/渠道</label></div>
                  <div class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入商户或渠道名称" />
                  </div>
                </div>
              </div>

              <!-- 走访基本信息输入区 -->
              <div class="weui-cells__title">走访基本信息</div>
              <div class="weui-cells">
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <label class="weui-label">
                      走访主题
                      <span style="color: red">*</span>
                    </label>
                  </div>
                  <div class="weui-cell__bd">
                    <input
                      class="weui-input"
                      placeholder="请输入走访主题"
                      required
                      value="年度重点客户回访"
                    />
                  </div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <label class="weui-label">
                      走访目的
                      <span style="color: red">*</span>
                    </label>
                  </div>
                  <div class="weui-cell__bd">
                    <input
                      class="weui-input"
                      placeholder="请输入走访目的"
                      required
                      value="了解企业经营情况"
                    />
                  </div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">走访人员</label></div>
                  <div class="weui-cell__bd">
                    <input class="weui-input" value="李明" readonly style="background: #f5f7fa" />
                  </div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">走访机构</label></div>
                  <div class="weui-cell__bd">
                    <input
                      class="weui-input"
                      value="南京新街口支行"
                      readonly
                      style="background: #f5f7fa"
                    />
                  </div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <label class="weui-label">
                      走访类型
                      <span style="color: red">*</span>
                    </label>
                  </div>
                  <div class="weui-cell__bd">
                    <select class="weui-select" required>
                      <option value="">请选择</option>
                      <option>现场</option>
                      <option>电联</option>
                    </select>
                  </div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <label class="weui-label">
                      走访时间
                      <span style="color: red">*</span>
                    </label>
                  </div>
                  <div class="weui-cell__bd">
                    <input class="weui-input" type="date" required value="2024-05-02T14:00" />
                  </div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
                  <div class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请输入备注">企业经营良好</textarea>
                  </div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <label class="weui-label">
                      走访定位
                      <span style="color: red">*</span>
                    </label>
                  </div>
                  <div class="weui-cell__bd">
                    <input
                      class="weui-input"
                      placeholder="自动获取定位或手动输入"
                      required
                      value="南京市江北新区龙腾路88号"
                    />
                  </div>
                  <div class="weui-cell__ft">
                    <button class="weui-btn weui-btn_mini weui-btn_default">获取定位</button>
                  </div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <label class="weui-label">
                      经纬度
                      <span style="color: red">*</span>
                    </label>
                  </div>
                  <div class="weui-cell__bd">
                    <input
                      class="weui-input"
                      placeholder="如 118.778074,32.057236"
                      required
                      value="118.778074,32.057236"
                    />
                  </div>
                </div>
                <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">走访照片</label></div>
                  <div class="weui-cell__bd">
                    <div class="weui-uploader">
                      <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files">
                          <li
                            class="weui-uploader__file"
                            style="
                              background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=facearea&w=200&h=200');
                            "
                          ></li>
                          <li
                            class="weui-uploader__file"
                            style="
                              background-image: url('https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=facearea&w=200&h=200');
                            "
                          ></li>
                        </ul>
                        <div class="weui-uploader__input-box">
                          <input
                            class="weui-uploader__input"
                            type="file"
                            accept="image/*"
                            multiple
                          />
                        </div>
                      </div>
                      <div class="weui-uploader__info">2/10</div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 产品信息输入区 -->
              <div class="weui-cells__title">产品信息</div>
              <div class="weui-cells">
                <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">意向产品</label></div>
                  <div class="weui-cell__bd">
                    <div class="weui-flex" style="margin-bottom: 8px">
                      <select class="weui-select" style="width: 120px; margin-right: 8px">
                        <option>存款</option>
                        <option>理财</option>
                        <option>保险</option>
                        <option>基金</option>
                        <option>贵金属</option>
                        <option>快捷</option>
                        <option>信用贷</option>
                        <option>抵押贷</option>
                        <option>新客</option>
                        <option>大白金</option>
                        <option>消费</option>
                        <option>商户分期</option>
                      </select>
                      <input
                        class="weui-input"
                        type="number"
                        placeholder="金额(万元)"
                        style="width: 80px; margin-right: 8px"
                        value="500"
                      />
                      <input
                        class="weui-input"
                        type="date"
                        style="width: 110px"
                        value="2024-05-01"
                      />
                    </div>
                    <div class="weui-flex" style="margin-bottom: 8px">
                      <select class="weui-select" style="width: 120px; margin-right: 8px">
                        <option>理财</option>
                        <option>存款</option>
                        <option>保险</option>
                        <option>基金</option>
                        <option>贵金属</option>
                        <option>快捷</option>
                        <option>信用贷</option>
                        <option>抵押贷</option>
                        <option>新客</option>
                        <option>大白金</option>
                        <option>消费</option>
                        <option>商户分期</option>
                      </select>
                      <input
                        class="weui-input"
                        type="number"
                        placeholder="金额(万元)"
                        style="width: 80px; margin-right: 8px"
                        value="200"
                      />
                      <input
                        class="weui-input"
                        type="date"
                        style="width: 110px"
                        value="2024-05-02"
                      />
                    </div>
                    <button class="weui-btn weui-btn_mini weui-btn_default" type="button">
                      添加产品
                    </button>
                  </div>
                </div>
              </div>

              <!-- 提级营销信息输入区 -->
              <div class="weui-cells__title">提级营销信息</div>
              <div class="weui-cells">
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <label class="weui-label">提级营销关联</label>
                  </div>
                  <div class="weui-cell__bd">
                    <select class="weui-select">
                      <option value="">请选择</option>
                      <option>省行公司金融部</option>
                      <option>市行普惠金融部</option>
                      <option>省行零售金融部</option>
                      <option>市行公司金融部</option>
                      <option>省行普惠金融部</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="weui-form__opr-area">
                <button class="weui-btn weui-btn_primary" style="margin-bottom: 12px">保存</button>
                <button class="weui-btn weui-btn_default" type="button">取消</button>
              </div>
            </form>
          </div>
        </div>

        <!-- 走访详情页面 -->
        <div class="group-title" style="font-size: 16px; color: #409eff; margin-bottom: 12px">
          走访详情页面
        </div>
        <div class="mobile-page">
          <div class="mobile-header">
            <div class="mobile-header-back"></div>
            <div class="mobile-header-title">走访详情</div>
          </div>
          <div class="mobile-content" style="overflow-y: auto; max-height: 768px">
            <div class="weui-panel">
              <div class="weui-panel__hd">走访对象</div>
              <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text">
                  <div class="weui-media-box__desc">
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">所属行业：</span>
                      <span class="weui-media-box__info__meta">南京制造业</span>
                    </div>
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">所属环节：</span>
                      <span class="weui-media-box__info__meta">生产</span>
                    </div>
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">商户/渠道：</span>
                      <span class="weui-media-box__info__meta">南京金龙机械有限公司</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="weui-panel">
              <div class="weui-panel__hd">走访基本信息</div>
              <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text">
                  <div class="weui-media-box__desc">
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">走访主题：</span>
                      <span class="weui-media-box__info__meta">年度重点客户回访</span>
                    </div>
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">走访目的：</span>
                      <span class="weui-media-box__info__meta">了解企业经营情况</span>
                    </div>
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">走访人员：</span>
                      <span class="weui-media-box__info__meta">李明</span>
                    </div>
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">走访机构：</span>
                      <span class="weui-media-box__info__meta">南京新街口支行</span>
                    </div>
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">走访类型：</span>
                      <span class="weui-media-box__info__meta">现场</span>
                    </div>
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">走访时间：</span>
                      <span class="weui-media-box__info__meta">2024-05-02</span>
                    </div>
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">备注：</span>
                      <span class="weui-media-box__info__meta">企业经营良好</span>
                    </div>
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">走访定位：</span>
                      <span class="weui-media-box__info__meta">南京市江北新区龙腾路88号</span>
                    </div>
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">经纬度：</span>
                      <span class="weui-media-box__info__meta">118.778074,32.057236</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="weui-panel">
              <div class="weui-panel__hd">产品信息</div>
              <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text">
                  <div class="weui-media-box__desc">
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">意向产品：</span>
                      <span class="weui-media-box__info__meta">存款、理财</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="weui-panel">
              <div class="weui-panel__hd">提级营销信息</div>
              <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text">
                  <div class="weui-media-box__desc">
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">提级营销关联：</span>
                      <span class="weui-media-box__info__meta">省行三农部</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="weui-panel">
              <div class="weui-panel__hd">修改日志</div>
              <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text">
                  <div class="weui-media-box__desc">
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">2024-05-02 15:00</span>
                      <span class="weui-media-box__info__meta">李明 修改了走访主题</span>
                    </div>
                    <div class="weui-media-box__info">
                      <span class="weui-media-box__info__meta">2024-05-02 16:00</span>
                      <span class="weui-media-box__info__meta">李明 修改了备注</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="weui-form__opr-area">
              <button class="weui-btn weui-btn_primary">编辑</button>
            </div>
          </div>
        </div>

        <!-- 走访列表页面（移动端） -->
        <div class="group-title" style="font-size: 16px; color: #409eff; margin-bottom: 12px">
          走访列表页面
        </div>
        <div class="mobile-page" data-weui-theme="light">
          <div class="mobile-header">
            <div class="mobile-header-back"></div>
            <div class="mobile-header-title">走访列表</div>
            <button
              class="weui-btn weui-btn_mini weui-btn_primary"
              style="position: absolute; right: 15px; top: 6px"
            >
              新增走访
            </button>
          </div>
          <div class="mobile-content">
            <div class="weui-cells">
              <div class="weui-cell" v-for="item in visits" :key="item.id">
                <div class="weui-cell__bd">
                  <p>{{ item.theme }}</p>
                  <p style="font-size: 12px; color: #888">
                    {{ item.merchant || item.industry }} | {{ item.time }}
                  </p>
                </div>
                <div class="weui-cell__ft">
                  <span
                    class="weui-badge"
                    :class="{
                    'weui-badge_success': item.status==='正常',
                    'weui-badge_warn': item.status==='已修改',
                    'weui-badge_error': item.status==='已撤回'
                  }"
                  >
                    {{ item.status || '正常' }}
                  </span>
                </div>
              </div>
            </div>
            <div style="color: #909399; font-size: 12px; margin-top: 16px">
              仅显示本人走访记录，点击可查看详情
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入WeUI JS -->
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <!-- 引入Echarts (用于地图和图表) -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
    <!-- 引入示例数据 -->
    <script type="module">
      import {
        industries,
        channels,
        customers,
        visits,
        promotions,
        audits,
        auditLogs,
        auditNodes,
      } from './mock-data.js'

      // 创建Vue实例
      new Vue({
        el: '#app',
        data() {
          return {
            industries,
            channels,
            customers,
            visits,
            promotions,
            audits,
            auditLogs,
            auditNodes,
            industryDetailVisible: false,
            promotionDetailVisible: false,
            industryDetail: {},
            promotionDetail: {},
          }
        },
        mounted() {
          console.log('行业开发管理系统原型已加载')
        },
        methods: {
          showIndustryDetail(row) {
            this.industryDetail = row
            this.industryDetailVisible = true
          },
          showPromotionDetail(row) {
            this.promotionDetail = row
            this.promotionDetailVisible = true
          },
        },
      })
    </script>
    <script>
      // Echarts地图和柱状图初始化
      if (window.echarts) {
        setTimeout(function () {
          // 行业地图
          var mapChart = echarts.init(document.getElementById('industry-map'))
          mapChart.setOption({
            title: { text: '南京市行业分布', left: 'center', textStyle: { fontSize: 14 } },
            tooltip: {},
            visualMap: {
              min: 0,
              max: 10,
              left: 'left',
              top: 'bottom',
              text: ['多', '少'],
              inRange: { color: ['#e0f3ff', '#409eff'] },
              calculable: true,
            },
            series: [
              {
                name: '行业数量',
                type: 'map',
                map: '南京',
                roam: false,
                data: [
                  { name: '玄武区', value: 5 },
                  { name: '秦淮区', value: 7 },
                  { name: '建邺区', value: 3 },
                  { name: '鼓楼区', value: 6 },
                  { name: '浦口区', value: 4 },
                  { name: '栖霞区', value: 2 },
                  { name: '雨花台区', value: 1 },
                  { name: '江宁区', value: 8 },
                  { name: '六合区', value: 2 },
                  { name: '溧水区', value: 1 },
                  { name: '高淳区', value: 1 },
                ],
              },
            ],
          })
          // 行业分析柱状图
          var barChart = echarts.init(document.getElementById('industry-bar'))
          barChart.setOption({
            title: { text: '行业客户数TOP5', left: 'center', textStyle: { fontSize: 14 } },
            tooltip: {},
            xAxis: { type: 'category', data: ['制造业', '批发业', '零售业', '服务业', '建筑业'] },
            yAxis: { type: 'value' },
            series: [
              {
                data: [30, 22, 18, 15, 10],
                type: 'bar',
                itemStyle: { color: '#409eff' },
              },
            ],
          })
        }, 500)
      }
    </script>
  </body>
</html>
